<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/shopmain.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/weui.min.css"/>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.2/av-min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../js/weUI.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="loading" v-show="!loading">
			<div class="load"></div>
			<div class="load2"></div>
		</div>

		<div class="main" v-show="loading" v-bind:style="{visibility: 'visible'}">
			<div class="Mer">
				<div class="header" onclick="history.go(-1)">
					<i class="icon Hui-iconfont">&#xe67d;</i>
				</div>
				<div class="Mermain" @click="shoper" v-for="item in shopmain">
					<div class="logo">
						<img src="../shoplist/{{item.shopimg}}" />
					</div>
					<div class="Merattr">
						<h2 class="mername" v-html="item.shopname">餐厅名</h2>
						<i class="icon Hui-iconfont">&#xe6d7;</i>
						<p class="time" v-html="item.notice">新用户首单免费</p>
					</div>
				</div>
			</div>
			<div class="shopTabContainer">
				<!--商品-->
				<div class="shop" @click="shope">
					<span :class="{'active':shop}">
					商品
				</span>
				</div>
				<!--评价-->
				<div class="evaluate" @click="evaluater">
					<span :class="{'active':evaluate}">
					评价
				</span>
				</div>
			</div>
			<div class="shopmain">
				<div class="shoplist" v-show="shop">
					<ul>
						<li v-for="item in shoplist[0]" @click="active($index)">
							<a href="#id{{$index}}"><span v-html="item">
						
					</span></a>
						</li>
					</ul>
					<div class="shoplist-container">
						<dl v-for="item in shoplist[0]">
							<dt id="id{{$index}}" v-html="item">热销榜</dt>
							<dd v-for="items in foodlist" v-if="items.classify.indexOf(item)>-1" id="{{items.foodid}}">
								<div class="foodimg">
									<img src={{items.productimg}} />
								</div>
								<div class="foodinfo">
									<header class="foodtitle">
										<span v-html="items.productname">
											金针肥牛
										</span>
									</header>
									<p class="fooddescription" v-html="items.remark">洋葱和牛肉洋葱和牛肉洋葱和牛肉洋葱和牛肉洋葱和牛肉洋葱和牛肉洋葱和牛肉，不吃洋葱的不要点</p>
									<p class="foodsales">
										<span>
											月售{{items.salenum}}份
										</span>
										<span>
											好评率{{items.grade}}%
										</span>
									</p>
									<strong class="footprice" v-html="items.price">14</strong>
									<div class="cartbutton">
										<a href="javascript:;" v-on:click="reduce(items.foodid)"><i class="icon Hui-iconfont" v-show="items.productnum>0">&#xe631;</i></a>
										<span v-show="items.productnum>0" v-html="items.productnum"></span>
										<a href="javascript:;" v-on:click="addpro(items.foodid)"><i class="icon Hui-iconfont">&#xe604;</i></a>
									</div>
								</div>
							</dd>

						</dl>
					</div>
				</div>
				<!--评价-->
				<div class="evaluate" v-show="evaluate">
					<div>
						<div class="overview-container">
							<div class="overview-col1">
								<strong>4.6</strong>
								<div>综合评价</div>
							</div>
							<div class="overview-col2">
								<div class="">
									综合评分:
								</div>
							</div>
						</div>
						<ul>
							<li class="index-comment">
								<img src="img/nimingyonghu.webp" />
								<div class="index-comment_3">
									<div class="index-comment_4">
										<div class="index_name">匿名用户</div>
										<div class="index_time">
											2017-04-05
										</div>
									</div>
									<div class="">
										30分钟送达
									</div>
								</div>
							</li>
							<li class="index-comment">
								<img src="img/nimingyonghu.webp" />
								<div class="index-comment_3">
									<div class="index-comment_4">
										<div class="index_name">匿名用户</div>
										<div class="index_time">
											2017-04-05
										</div>
									</div>
									<div class="">
										30分钟送达
									</div>
								</div>
							</li>
							<li class="index-comment">
								<img src="img/nimingyonghu.webp" />
								<div class="index-comment_3">
									<div class="index-comment_4">
										<div class="index_name">匿名用户</div>
										<div class="index_time">
											2017-04-05
										</div>
									</div>
									<div class="">
										30分钟送达
									</div>
								</div>
							</li>
							<li class="index-comment">
								<img src="img/nimingyonghu.webp" />
								<div class="index-comment_3">
									<div class="index-comment_4">
										<div class="index_name">匿名用户</div>
										<div class="index_time">
											2017-04-05
										</div>
									</div>
									<div class="">
										30分钟送达
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="foot_b">
			<div class="shoppingcart" v-bind:class="{'total':total>0}">
				<i class="icon Hui-iconfont">&#xe670;</i>
			</div>
			<div class="cartview">
				<p class="cartview-pri1">￥{{total.toFixed(2)*1}}</p>
				<p class="cartview-pri2">配送费￥{{shopmain[0].distribution}}</p>
			</div>
			<div class="account" v-if="startprice-total<0&&total>0" v-bind:class="{'jiesuan':total-startprice>0&&total>0}" @click="Settlement">去结算</div>
			<div class="account" v-else>还差{{startprice-total}}结算</div>
		</div>
	</body>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/shopmain.js" type="text/javascript" charset="utf-8"></script>

</html>